<template>
	<view>
		<uni-nav-bar
				statusBar="true" 
				:fixed="false" 
				:border="false" 
				bgcolor="#dddddd"
				backgroundColor="#ffffff">
					<view class="nav-bar-title" slot="middle" @tap.stop="showAccount">
						<view>
							{{loginInfo.username}}
						</view>
						<i class="icon iconfont iconsanjiaoxing"></i>
					</view>
				</uni-nav-bar>
	
		
		<view class="assets-top">
			<view class="assets-top-t">
				<text>{{i18n.TotalAssets}}(USDT）</text>
				<view>{{total || '--'}}</view>
				<text class="yues-info">{{total_cny || 0}} CNY</text>
			</view>
			<view class="assets-top-b">
				<text>{{usdtinfo.a_ddress || '--'}}</text>
				<i class="icon iconfont iconfuzhi-" hover-class="active" @tap.stop="copy(usdtinfo.address)"></i>
			</view>
		</view>
		
	<!-- 	<view class="bulletin">
			<image src="../../static/imgs/notice.png"></image>
			<swiper circular="true" vertical="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in news" :key="index">
					<view class="swiper-item" @tap.stop="jumDetail(index)">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="index-nav">
			<view class="index-nav-item" hover-class="active" @tap.stop="doingIem('scan')">
				<view class="icon-content">
					<i class="icon iconfont iconsaomiao"></i>
				</view>
				
				<view class="icon-fon">{{i18n.scantoscas}}</view>
			</view> 
			<view class="index-nav-item" hover-class="active" @tap.stop="doingIem('coin')">
				<view class="icon-content">
					<i class="icon iconfont iconerweima"></i>
				</view>
				
				<view class="icon-fon">{{i18n.Receive_payment}}</view>
			</view>
			<view class="index-nav-item" hover-class="active" @tap.stop="doingIem('trans')">
				<view class="icon-content">
					<i class="icon iconfont iconzhuanzhang"></i>
				</view>
				
				<view class="icon-fon">{{i18n.withdrawal}}</view>
			</view>
			<view class="index-nav-item" hover-class="active" @tap.stop="doingIem('invited')">
				<view class="icon-content">
					<i class="icon iconfont iconziyuan"></i>
				</view>
				
				<view class="icon-fon">{{i18n.invite_friends}}</view>
			</view>
			
			
		</view>
		<view class="assets-content">
			<view class="assets-title">
				{{i18n.Assetlist}}
			</view>
			<block v-for="(item,index) in curList" :key="index">
				<view class="assets-list-li" @tap.stop="selctItem(index)">
					<view class="assets-list-li-t">
						<view class="assets-list-l">
							<image :src="item.logo" mode="widthFix" lazy-load></image>
							<view>{{item.title_en || ''}}</view>
						</view>
						<view class="assets-list-r">
							<view>{{item.balance || '0'}}</view>
							<text>≈{{item.usd_price || 0}}</text>
							
							
						</view>
					</view>
					<view class="assets-list-li-b" :class="item.show?'anima':''">
						<button @tap.stop="jumpHistory(item)">{{i18n.bili}}</button>
						<button @tap.stop="revhargeItem(item)">{{i18n.Recharge}}</button>
						<button @tap.stop="coinItem(item)">{{i18n.withdrawal}}</button>
					</view>
				</view>
			</block>
			
		<!-- 	<view class="assets-list-li" @tap.stop="show=!show">
				<view class="assets-list-li-t">
					<view class="assets-list-l">
						<image src="" mode="widthFix" lazy-load></image>
						<view>ETH</view>
					</view>
					<view class="assets-list-r">
						<view>17.9734</view>
						<text>≈56461.45 CNY</text>
					</view>
				</view>
				<view class="assets-list-li-b" :class="item.zdfisshow?'anima':''">
					<button>充币</button>
					<button>提币</button>
				</view>
			</view> -->
			
		</view>
		
		
		<view class="index-mask" v-if="showAcc" @tap.stop="hideAccount">
			<view class="index-popule" @tap.stop="''">
				<view class="index-popule-content">
					<view class="index-popule-content-t">
						<view></view>
						<view>{{i18n.wall_manage}}</view>
						<i class="icon iconfont iconcha" @tap.stop="hideAccount"></i>
					</view>
					<block v-for="(item,index) in accout_list" :key="index">
					<view class="index-popule-li"  @tap.stop="Switch_account(item,index)">
						<view class="index-popule-li-l">
							{{item.username}}
						</view>
						<i class="icon iconfont "  :class="[item.istrue?'icongou':'']"></i>
					</view>
					</block>
				</view>
			</view>
		</view>
		<view class="mask-select animated fast fadeIn" v-if="showDetele" @tap.stop="showDetele=false">
			<view class="mask-select-contant" @tap.stop="''">
				<view class="mask-select-content">
					<view class="mask-select-t">
						{{i18n.messgae}}
					</view>
					
					<view class="mask-select-nav">
						<button type="default" hover-class="active" @tap.stop="switch_user">{{i18n.Switch_account}}</button>
						<!-- <button type="default" hover-class="active" @tap.stop="deleteItem">{{i18n.Delete_account}}</button> -->
						<button type="default" hover-class="active" @tap.stop="showDetele=false">{{i18n.cancel}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import bwSwiper from "../../components/bw-swiper/bw-swiper.vue"
	import marketList from "../../components/common/market-list.vue"
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getLogin',
				'getUserlist'
			])
		},
		components:{
			uniNavBar,
			bwSwiper,
			marketList,
			Load
		},
		data() {
			return {
				show:false,
				showLoad:false,
				total:'',
				news:[],
				list:[],
				curList:[],
				bannerList:[],
				marketlist:[],
				totalInfo:{},
				usdtinfo:{},
				total_cny:'',
				loginInfo:{},
				accout_list:[],
				cur:{},
				index:'',
				showDetele:false,
				showAcc:false
			}
		},
		onShow() {
			_updataTabBar(this.getTextArr,this.getLangType)
			this.indexFunc()
			this.showDetele = false;
			this.showAcc = false;
			this.loginInfo = this.getLoginInfo
			this.showLoad=false;
			this.news=[]
			this.total=""
			this.curList=[]
			this.totalInfo={}
			this.total_cny=''
			this.usdtinfo={}
			// this.getMesg();
			this.getWall();
			this.accout_list = this.getUserlist
			this.accout_list.forEach((item,index)=>{
				this.accout_list[index].choose = false;
				if(item.username==this.getLoginInfo.username){
					this.indexs = index;
					this.accout_list[index].istrue = true;
				}else{
					this.accout_list[index].istrue = false;
				}
			})
			// this.getMarket();
			// this.getMsg();
			// this.getLun();
			// this.getmarketlist();
			this.getMCheckB()
		},   
		methods: {
			indexFunc(){
				let url = this.getRequestUrl + '/api/index/index';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.code == 1){
						
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}else if(res.data.code ==3){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}else{
						showToast(res.data.msg)
					}
				}).catch(err=>{
					this.showLoad = true;
				})
			},
			getMCheckB(){
					let _url = this.getRequestUrl+'/api/Wallet/check_b';
					let _data ={
						id:this.getLoginInfo.id,
						token:this.getLoginInfo.token
					}
					fetch(_url,_data,'POST').then(res=>{
						
					})
				},
			showAccount(){
				this.showAcc  =true;
				this.showDetele = false;
			},
			hideAccount(){
				this.showAcc  =false;
				this.showDetele = false;
			},
			Switch_account(item,index){
				if(item.username==this.getLoginInfo.username)return
				this.cur=item
				this.index=index
				this.showDetele = true;
				this.showAcc = false;
			},
			switch_user(){
				let item = this.cur
				let index = this.index
				// if(this.showDetele==true){
				// 	console.log(this.list[index].choose);
				// 	this.list[index].choose = !this.list[index].choose;
				// 	this.$set(this.list, index, this.list[index])
				// 	return
				// }
				// showToast(item.istrue);return
				if(item.istrue==true)return;
				this.setLoginInfo('');
				this.setLogin('');
				this.showLoad = true
				let _data = {
					username: item.username,
					password: item.password,
					lang_type: this.getLang
				}
				if(this.isCheck) return
				this.isCheck  = true;
				// showToast('11')
				fetch(this.getRequestUrl +'/api/login/login', _data, "post")
					.then(res => {
						this.isCheck  = false;
						this.showLoad = false
						if (res.statusCode == 200 && res.data.code == 1) {
							this.showDetele = false;
							// showToast('切换成功')
							showToast(this.getLang==1?'切换成功':'Switch successfully')
							let {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode, pay_key} = res.data.data
							let loginfo = {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode, pay_key}
							this.loginInfo={email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode, pay_key}
							this.setLoginInfo(loginfo)
							this.setLogin({
								username: item.username,
								password: item.password
							})
							this.list.forEach((item,index)=>{
								// this.list[index].address_ = this.asterisksCard(item.address)
								this.list[index].choose = false;
								if(item.username==this.getLoginInfo.username){
									this.indexs = index;
									this.list[index].istrue = true;
								}else{
									this.list[index].istrue = false;
								}
							})
							console.log(this.loginInfo,'this.usdtinfo');
							this.accout_list = this.getUserlist
							this.accout_list.forEach((item,index)=>{
								this.accout_list[index].choose = false;
								if(item.username==this.getLoginInfo.username){
									this.indexs = index;
									this.accout_list[index].istrue = true;
								}else{
									this.accout_list[index].istrue = false;
								}
							})
							this.getMCheckB()
							this.getWall();
							this.$forceUpdate()
						} else {
							showToast(res.data.msg)
						}
					})
					.catch(err => {
						this.isCheck  = false;
						this.showLoad = false
					})
			},
			jumDetail(index){
				let item = this.news[index]
				console.log(item);
				this.setBulletin(item);
				
				uni.navigateTo({
					url:`/pages/news/bullentin?title=${this.currentTab ?  this.i18n.CommunityNews : this.i18n.news }`
				})
				
			},
			doingIem(obj){
				let _this = this
				switch (obj){
					case 'scan':
					uni.scanCode({
						success: function (res) {
							// console.log('条码类型：' + res.scanType);
							// console.log('条码内容：' + res.result);
							let rst = res.result
							_this.setCoin({address:rst})
							let usdt_ = _this.curList.filter(item=>item.id==3)
							// console.log(usdt_,'usdt shuju sadand ');
							if(usdt_.length==0)return
							// uni.navigateTo({
							// 	url:`/pages/wall/collection?item=${JSON.stringify(usdt_[0])}`
							// })
							uni.navigateTo({
								url:`/pages/coin/coin?item=${JSON.stringify(usdt_[0])}&list=${JSON.stringify(_this.curList)}`
							})
						}
					});
						break;
					case 'coin':
					let items = JSON.stringify(this.usdtinfo);
					uni.navigateTo({
						url:`/pages/recharge/recharge?item=${items}`
					})
						break;
					case 'trans':
						let item = JSON.stringify(this.usdtinfo);
						uni.navigateTo({
							url:`/pages/coin/coin?item=${item}&list=${JSON.stringify(this.curList)}`
						})
						break;
					case 'invited':
						uni.navigateTo({
							url:`/pages/invite/invite`
						})
						break;
				}
			},
			// scan  coin  trans
			copy(url){
				if(!url)return
				if (this.isfast) return;
				this.isfast = true;
				setTimeout(()=> {
					this.isfast = false;
				}, 1500)
				let  _this = this;
				uni.setClipboardData({
					data: url,
					success: function () {
						showToast(_this.i18n.copy_success)
						return
						uni.showModal({
							title: _this.i18n.copy_success,
							content:  _this.i18n.copy_success_message, 
							showCancel:false,
							success: function(res) {
								if (res.confirm) {											 
									//console.log('用户点击确定');
								} else if (res.cancel) {
									//console.log('用户点击取消');
								}
							}
						});
					}
				});
			},
			revhargeItem(obj){
				let item = JSON.stringify(obj);
				uni.navigateTo({
					url:`/pages/recharge/recharge?item=${item}`
				})
			},
			coinItem(obj){
				let item = JSON.stringify(obj);
				uni.navigateTo({
					url:`/pages/coin/coin?item=${item}&list=${JSON.stringify(this.curList)}`
				})
			},
			selctItem(index){
				for	(let i = 0; i < this.curList.length; i++){
					// console.log(123456)
					if (index === i && !this.curList[i].show) {
						if(this.curList[index].id==10){
							this.curList[i].show = false
							this.curList[i].border = 0;
							this.curList[i].height = '0px'
							this.$set(this.curList, i, this.curList[i])
						}else{
							this.curList[i].show = !this.curList[i].show
							this.curList[i].show = true
							this.curList[i].border = this.curList[i].show ? '1px solid #E2E2E2 !important' : '0px'
							this.curList[i].height = uni.upx2px(this.curList[i].show ? 144 : 0) + 'px'
							this.$set(this.curList, i, this.curList[i])
						}
					} else {
						this.curList[i].show = false
						this.curList[i].border = 0;
						this.curList[i].height = '0px'
						this.$set(this.curList, i, this.curList[i])
					}
				}
			},
			pageToView(e){
				switch (e){
					case 1:
						uni.navigateTo({
							url:'/pages/recruit/recruit'
						})
						break;
					case 2:
						uni.navigateTo({
							url:'/pages/finace/finace'
						})
						break;
					case 3:
						uni.navigateTo({
							url:'/pages/service/service'
						})
						break;
					default:
						uni.navigateTo({
							url:'/pages/exchangeURL/exchangeURL'
						})
						break;
				}
			},
			getMesg(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/Index/udata";
				let data = { }
				fetch(url,data,"POST").then(res=>{
					// showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code){
						this.totalInfo = res.data.data
					}
					
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			invites(){
				uni.navigateTo({
					url:`/pages/invite/invite`
				})
			},
			balances(){
				uni.navigateTo({
					url:`/pages/balance/balance`
				})
			},
			...mapMutations(['setPackages','setBulletin','setCoin','setLoginInfo', 'setLogin']),
			jumps(item){
				
				let items = JSON.stringify(item)
				
				this.setPackages(items) 
				uni.navigateTo({
					url:`/pages/fund/fund-live-detail`
				})
			},  
			exchanges(){
				uni.navigateTo({
					url:'/pages/exchange/exchange'
				})
			},
			balance(){
				uni.navigateTo({
					url:'/pages/balance/balance'
				})
			},
			Collection(){
				uni.navigateTo({
					url:`/pages/wall/collection?item=${JSON.stringify(this.curList[0])}&list=${JSON.stringify(this.curList)}`
				})
			},
			transfer(){
				uni.navigateTo({
					url:`/pages/wall/transfer?item=${JSON.stringify(this.curList[0])}`
				})
			},
			jumpHistory(item){
				uni.navigateTo({
					url:`/pages/wallet/history?item=${JSON.stringify(item)}`
				})
			},
			jumpWall(){
				uni.navigateTo({
					url:'/pages/wall/wall'
				})
			},
			getmarketlist(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/Shop/shop_list";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type:1
				}
				fetch(url,data,"POST").then(res=>{
					// showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code){
						this.marketlist = res.data.data
						this.marketlist.forEach((item,index)=>{
							this.marketlist[index].percentage = (((parseInt((item.max/item.buy_num)*10000))/10000)*100).toFixed(2)
						})
					}
					
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			getWall(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					pay_key:this.getLoginInfo.pay_key
				}
				fetch(url,data,"POST").then(res=>{
					// showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code==1){
						this.total_cny = res.data.data.total_cny
						this.total = res.data.data.total_usd;
						this.curList = res.data.data.list;
						let usdt_ = res.data.data.list.filter(item=>item.token_id==3)
						this.curList.forEach((item,index)=>{
							this.curList[index].type = (item.zdf>=0?true:false)
							this.curList[index].zdfisshow = false;
							item.zdf = (item.zdf*100)+'%'
						})
						this.usdtinfo = usdt_[0] 
						if(this.usdtinfo.address){
							this.usdtinfo.a_ddress = this.asterisksCard(this.usdtinfo.address)
						}else{
							this.getAddress(this.usdtinfo.id)
						}
					}else if(res.data.code==2 || res.data.code==3){
						uni.navigateTo({
							urk:"/pages/new-login/new-login"
						})
					}
					
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			getAddress(token_id){
				let _url = this.getRequestUrl+'/api/wallet/create_address';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_id:token_id
				}
				let result = fetch(_url, data, "POST");
				this.showLoad = true;
				result.then(res=>{
					// console.log(res);
					this.showLoad = false;
					this.usdtinfo.a_ddress = this.asterisksCard(res.data.data.address)
				}).catch(err=>{
					this.showLoad = false;
					console.log(err)
				})
			},
			asterisksCard (account){
				account = account.replace(/\s/g, '');
				  var aLength = account.length;
				  if (account[0] === '1') {
					  //手机号码
					 return account.substr(0, 3) + "****" + account.substring(7, 11);
				 } else {
					 //银行卡号
					 var asterisks = "";
					 var tail = aLength % 4;
					 var sLenght = 0;
					 var start = 0;
					 if (tail!=0) {
						 sLenght = aLength - 4 - tail;
						 start = aLength - tail;
					} else {
						 sLenght = aLength - 8;
						 start = aLength - 4;
					 }
					 for (var i = 0; i < sLenght; i++) {
						 asterisks += '*';
					 }
					 return account.substr(0, 4) + '******************' + account.substring(start, aLength);
				 }
			},
			getMsg(){
				let _url = this.getRequestUrl+'/api/Wallet/check_b';
				let _data ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				fetch(_url,_data,'POST').then(res=>{
					
				})
			},
			getNotice(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/user/notice";
				fetch(url,{},'post').then(res=>{
					
					// showToast(res.data.msg)
					if(res.data.code){
						this.showLoad = false;
						this.news = res.data.data;
						this.news.forEach(item=>{
							item.content = item.content
									  .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
									  .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
									  .replace(/<p>/ig, '<p class="p_class">')
									  .replace(/\<img/gi, '<img style="max-width:98%;height:auto" ')
							
						})
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			noInput(){
				showToast(this.i18n.nodata)
			},
			getMarket(){
				let _url = this.getRequestUrl+'/api/wallet/getCoinMarket';
				let result = fetch(_url, '', "POST");
				this.showLoad = true;
				result.then(res=>{
					this.showLoad = false;
					if(res.data.code){
						this.list = res.data.data;
						this.list.forEach((item,index)=>{
							this.list[index].title_en = item.coin;
							this.list[index].balance = item.last;
							this.list[index].usd_price = item.last;
							this.list[index].zdfisshow = true;
							if(item.percentChange>=0){
								this.list[index].zdf = item.percentChange + '%';
								this.list[index].type = true
							}else{
								this.list[index].zdf = -(item.percentChange) + '%';
								this.list[index].type = false
							}
						})
						
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			getLun(){
				let _url = this.getRequestUrl+'/api/user/lun';
				let result = fetch(_url);
				this.showLoad = true;
				result.then(res=>{
					this.showLoad = false;
					if(res.data.code){
						this.bannerList = res.data.data
						this.bannerList.forEach((item,index)=>{
							this.bannerList[index].img = this.getRequestUrl+'/uploads/'+item.img
						})
					}
				}).catch(err=>{ 
					this.showLoad = false;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.mask-select{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 10;
		.mask-select-contant{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 650rpx;
			z-index: 12;
			background: #FFFFFF;
			border-radius: 20rpx;
			transform: translate(-50%,-50%);
			.mask-select-content{
				.mask-select-t{
					line-height: 100rpx;
					font-size: 30rpx;
					color: #929292;
					text-align: center;
					border-bottom: 1rpx solid #f6f6f6;
				}
				.mask-select-nav{
					padding: 40rpx 30rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					align-items: center;
					button{
						flex: 1;
						margin-right: 15rpx;
						line-height: 64rpx;
						font-size: 28rpx;
						padding: 0;
						color: #ffffff;
						background: #f00;
						&:first-of-type{
							background: #294362;
						}
						&:last-of-type{
							background: #e4e4e4;
							color: #929292;
							margin-right: 0;
						}
						&.active{
							background: #c9c9ca;
							color: #666666;
							opacity: .95;
							transform: scale(.95);
						}
					}
				}
			}
		}
	}
	.index-mask{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: .4);
		.index-popule{
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 100;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			.index-popule-content{
				min-height: 200rpx;
				.index-popule-content-t{
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					line-height: 90rpx;
				}
				.index-popule-li{
					line-height: 90rpx;
					border-top: 1rpx solid #f9f9f9;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
.nav-bar-title{
	padding-left:30upx;
	display: flex;
	align-items: center;
	view{
		font-size:38upx;
		font-weight:bold;
		color:#000000;
		&.icon{
			margin-left: 20rpx;
			font-size: 28rpx;
		}
	}
}
	.assets-top{
		margin: 20rpx 30rpx;
		background: #2c4162;
		border-radius: 20rpx;
		padding: 40rpx 100rpx 50rpx 40rpx;
		.assets-top-t{
			text{
				font-size: 24rpx;
				color: #FFFFFF;
				&.yues-info{
					display: block;
					color: rgba(255,255,255,.7);
					margin-bottom: 20rpx;
				}
			}
			view{
				color: #FFFFFF;
				font-size: 50rpx;
				font-weight: bold;
				margin: 20rpx 0 0;
			}
		}
		.assets-top-b{
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #949dad;
			text{
				color: #949dad;
				font-size: 24rpx;
			}
			.icon{
				&.active{
					color: #FFFFFF;
				}
			}
		}
	}
	.bulletin {
		z-index: 10;
		height: 58upx;
		line-height: 58upx;
		display: flex;
		overflow: hidden;
		margin-bottom: 40upx;
		// background-color: #1B164C;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		image {
			width: 35upx;
			height: 34upx;
			margin: 22upx 22upx 22upx 28upx;
			flex-shrink: 0;
		}
		swiper {
			height: 74upx;
			flex: 1;	
			overflow: hidden;
			display: flex;
			align-items: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			.swiper-item {
				color: #666666;
				font-size: 24upx;
				height: 74upx;
				line-height: 74upx;
			}
		}
	}
	.index-nav{
		display: flex;
		// align-items: center;
		.index-nav-item{
			padding: 30rpx 0 30rpx;
			flex: 1;
			text-align: center;
			&.active{
				background: rgba(0,0,0,.05);
			}
			.icon-content{
				width: 120rpx;
				margin: 0 auto;
				height: 120rpx;
				border-radius: 60rpx;
				line-height: 120rpx;
				box-shadow: 0 0 20rpx rgba(0,0,0,.4);
				margin-bottom: 25rpx;
				.icon{
					font-size: 60rpx;
				}
			}
			.icon-fon{
				font-size: 26rpx;
				color: #0C1020;
				font-weight: bold;
			}
		}
	}
	.assets-content{
		padding: 0 30rpx 40rpx;
		.assets-title{
			line-height: 56rpx;
			font-size: 28rpx;
			color: #0C1020;
			font-weight: bold;
		}
		.assets-list-li{
			position: relative;
			&::after{
				position: absolute;
				content: "";
				right: 0;
				bottom: 0;
				background: #ECECED;
				width: 580rpx;
				height: 2rpx;
			}
			.assets-list-li-t{
				padding: 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.assets-list-l{
					display: flex;
					align-items: center;
					image{
						width: 80rpx; 
						height: 80rpx;
						flex-shrink: 0;
						margin-right: 28rpx;
						background: #FFFFFF;
						border-radius: 40rpx;
					}
					view{
						font-size: 30rpx;
						color: #0C1020;
						font-weight: bold;
					}
				}
				.assets-list-r{
					text-align: right;
					view{
						font-weight: bold;
						font-size: 30rpx;
						color: #0C1020;
					}
					text{
						font-size: 26rpx;
						color: #84878f;
					}
				}
			}
			.assets-list-li-b{
				&.anima{
					animation: test-animation 1s linear 0s 1 forwards;
				}
				height: 0;
				overflow: hidden;
				display: flex;
				flex-direction: row-reverse;
				// flex-grow: flex-end;
				button{
					margin: 0;
					width: 160rpx;
					line-height: 70rpx;
					height:70rpx;
					border-radius: 10rpx;
					padding: 0;
					font-size: 26rpx;
					&:first-of-type{
						background: #39486D;
						color: #FFFFFF;
						border: none;
					}
					&:nth-child(2){
						border: 1rpx solid #39486D;
						color: #39486D;
						margin-right: 70rpx;
					}
					&:last-of-type{
						border: 1rpx solid #39486D;
						color: #39486D;
						margin-right: 70rpx;
					}
				}
			}
		}
	}
	
	
	
	@-webkit-keyframes test-animation {
	  0% { 
		  border-top:none;
		  height: 0;
		  opacity: 1;
		  }
	  100% { 
		  // border-top:1upx solid #CACACA;
		  height: 100upx;
		  padding-top: 38upx;
		  display: block !important;
		  }
	}
	@keyframes test-animation {
	  0% {
	  	  border-top:none;
	  	  height: 0;
	  	  opacity: 0;
	  	  }
	  100% { 
	  	  // border-top:1upx solid #CACACA;
	  	  height: 110upx;
		  padding-top: 38upx;
		  display: block !important;
	  	  }
	} 
</style>
